MapView

2024-06-02 07:00| 来源: 网络整理| 查看: 265

Overview Using the view Programmatic navigation MapView navigation MapView navigation with Gamepad and 3DConnexion Devices Handling events

Overview

A MapView displays a 2D view of a Map instance. An instance of MapView must be created to render a Map (along with its operational and base layers) in 2D. To render a map and its layers in 3D, see the documentation for SceneView. For a general overview of views, see View.

For a map to be visible to the user in the DOM, a MapView must be created and reference a minimum of two objects: a Map instance and a DOM element. Each is set in the map and container properties respectively.

// Create a MapView instance (for 2D viewing) const view = new MapView({ map: myMap, // References a Map instance container: "viewDiv" // References the ID of a DOM element });

Using the view

In addition to being responsible for the rendering of the Map and its elements, the MapView handles the interaction between the user and the map. For example, the traditional map scale isn't set on the Map; it's set on the MapView.

view.scale = 24000; // Sets a 1:24,0000 scale on the view

A MapView may not be immediately ready for display after it has been constructed. For example, map data may need to be loaded first to determine the spatialReference of the view, or the DOM container may not yet have a non-zero size. Many of the view methods (such as hitTest or goTo) need the view to be ready before they can be used.

.when() method on the MapView instance can be called to execute processes that may only run after the map has loaded.

view.when(function() { // MapView is now ready for display and can be used. Here we will // use goTo to view a particular location at a given zoom level and center view.goTo({ center: [-112, 38], zoom: 12 }); }) .catch(function(err) { // A rejected view indicates a fatal error making it unable to display. // Use the errback function to handle when the view doesn't load properly console.error("MapView rejected:", err); });

For live examples of view.when(), see how to Add 2D overview map in SceneView samples.

Programmatic navigation

You can set the initial extent (or visible portion of the map) by using either a combination of center and scale or zoom, or by setting the extent or viewpoint property in the MapView's constructor.

Because some view properties override one another, there is a set priority in which these properties are applied during construction of the view. When initialized, the MapView requires a center and scale, and optionally a rotation. Center and scale are derived from several properties: center, zoom, scale, extent or a viewpoint. Both center and scale can be derived from extent and viewpoint. If all properties are set in the constructor, they will be applied in the order they are defined. For example, a scale is derived from an extent, so setting scale after the extent overrides the derived value, while the center derived from the extent's center remains the same. The following table describes which properties have priority during view construction (properties that are overridden will have no effect during construction).

Property Overrides viewpoint extent, center, scale, zoom extent center, scale, zoom const view = new MapView({ map: map, container: "viewDiv", zoom: 10, extent: initialExtent, // will override zoom // map will be centered at [0,0], but the scale from initialExtent will be used center: [0,0] });

Notes

If the spatial reference of the center, extent or viewpoint.targetGeometry set in the constructor does not match the spatialReference of the view, then projection engine will be loaded dynamically. At runtime, the projection engine must be loaded when setting the center, extent or viewpoint to a spatial reference that doesn't match the view spatial reference. You can check if the projection engine is loaded prior to setting these properties by calling projection.isLoaded(). If it is not yet loaded, you can call projection.load(). // Create a map with Antarctic imagery basemap const map = new Map({ basemap: new Basemap({ portalItem: { id: "6553466517dd4d5e8b0c518b8d6b64cb" // Antarctic Imagery } }); }); // Set the center and zoom level on the view. // In this case, the view's spatial reference wkid is 3031 // center is lat/long. Projection engine will be loaded dynamically // to project the center to match the spatial reference of the view const view = new MapView({ map: map, // References a Map instance container: "viewDiv" // References the ID of a DOM element center: [-100, 35], // Sets the center point of the view at a specified lon/lat zoom: 3 // MapView converts this to its corresponding scale which is 112823780.660964 }); // Sets the center point of the view at a specified lon/lat view.center = [-112, 38]; view.zoom = 13; // Sets the zoom LOD to 13 // new extent for the mapview where the spatialReference.wkid is 4326 const extent = new Extent({ xmin: -9177882, ymin: 4246761, xmax: -9176720, ymax: 4247967, spatialReference: { wkid: 102100 } }); if (!projection.isLoaded()) { // load the projection engine if it is not loaded await projection.load(); } view.extent = extent;

Because the View handles user interaction, events such as click are handled on the MapView. Animations are also possible with the goTo() method, which allows you to change or move the MapView from one extent to another.

Zoom and LODs

Why doesn't setting MapView.zoom always work and why is its value -1? This section explains how MapView zoom and LODs work. The map's basemap defines the MapView's effectiveLODs when the view is loaded. A LOD has a scale and corresponding zoom value which can be used to navigate the map. If the MapView has valid effectiveLODs, the zoom value can be set on the MapView. In this case, the view converts it the corresponding scale, or interpolates it if the zoom is a fractional number.

The MapView's constraints.effectiveLODs will be null if the following statements are true:

The map doesn't have a basemap, or the basemap does not have a TileInfo, AND the first layer added to the map does not have a TileInfo.

If the effectiveLODs are null, it is not possible to set zoom on the MapView because the conversion is not possible. The zoom value will be -1 in this case. Setting scale will work. To address this, the MapView's constraints.lods can be defined at the time of its initialization by calling TileInfo.create().lods.

MapView navigation

MapView navigation is enabled by default and includes mouse interaction as described in the table below.

Action MapView behavior Drag Pan Double-click Zoom in at the cursor Ctrl+Double-click Zoom out at the cursor Scroll forward Zoom in at the cursor Scroll backward Zoom out at the cursor Right-click+Drag 2D-rotate Shift+Left-click+Drag Zoom to the extent of the drawn graphic Arrow Keys Nudge the view to left, right, up or down N Adjust the view to point north A Rotate the view counterclockwise D Rotate the view clockwise + Incrementally zoom in at the center of the map - Incrementally zoom out at the center of the map Drag with one or multiple fingers Pan Double-tap with one finger Zoom Pan at the finger position Two finger pinch in/out Zoom out/in Move two fingers in clockwise or counterclockwise direction Rotate

To disable MapView navigation, you must call the stopPropagation() method on the event objects of the pointer or gesture events that trigger the navigation.

See our samples on disabling view navigation for examples.

MapView navigation with Gamepad and 3DConnexion devices

Gamepads and 3Dconnexion devices, like the SpaceMouse, can be used for navigation when view.navigation.gamepad.enabled is set to true (default). To enable zooming in MapView, view.constraints.snapToZoom must be set to false (default is true). Please see GamepadInputDevice for supported devices.

Gamepad Action MapView behavior Left Trigger Zoom in Right Trigger Zoom out Left Stick Pan the view Right Stick Rotate the view Action Image SpaceMouse Action MapView behavior Push (left/right/forward/backward) Pan the view Pull up Zoom out Push down Zoom in Rotate clockwise Rotate the view clockwise Rotate counterclockwise Rotate the view counterclockwise

To disable gamepad navigation, you can set view.navigation.gamepad.enabled to false.

Notes:

Zoom snapping must be disabled for continuous zooming. In MapView, snapToZoom is true by default. view.constraints.snapToZoom = false; Per W3C Working Draft 29 October 2020, gamepad functionality may not be available on some or all browsers if the web application is hosted on a non-secure context (e.g. http rather than https). Future versions of the ArcGIS Maps SDK for JavaScript may explicitly disable gamepad capabilities on non-secure contexts.

Handling events

When users interact with the MapView, their actions trigger events that you can listen and respond to. For example, you can listen when a user moves the mouse over the map and display the coordinates at the mouse location. This is called a pointer-move event. See the MapView events section for a list of all the events.

It is important to note that some events are dependent on each other and the timing of the user interaction can influence the type of event that gets triggered. For example, a single click triggers a series of events: pointer-down when the user presses the mouse button, pointer-up when they release the mouse button. An immediate-click event gets triggered right after the pointer-up event. immediate-click should be used for responding to user interaction without delay. The click event is only triggered after making sure that the user doesn't click a second time (in which case it would trigger a double-click event).

In the case of a double-click, the same event chain is repeated after the first click. However, if the user clicks a second time within a close time range, then the click event is not emitted anymore, but the pointer-down, pointer-up and immediate-click events are triggered again. After two immediate-click events, a double-click event gets triggered along with an immediate-double-click event. The difference between the two is that an immediate-double-click cannot be prevented by the use of stopPropagation on the immediate-click event and can therefore be used to react to double-clicking independently of usage of the immediate-click event.

These events are also used internally for navigation, popups or different interactive tools like measurement or sketch. In some use cases, adding additional event listeners might interfere with the default event listeners. For example, adding an immediate-click event to open up a popup, will interfere with the default click event that also opens up a popup.

See the Event explorer sample, to visualize the different events that get triggered when you interact with the view.

【本文地址】

公司简介

联系我们